<template>
  <div class="reimbursement-review">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="标题" prop="title" show-overflow-tooltip />
      <el-table-column
        label="费用类型"
        align="center"
        prop="amountTypeName"
        width="120"
      />
      <el-table-column
        label="预算金额"
        align="center"
        prop="amountBudget"
        width="100"
      />
      <el-table-column
        label="执行金额"
        align="center"
        prop="amountExecute"
        width="100"
      />
      <el-table-column label="发生日期" align="center" prop="occurTime" />
      <el-table-column label="付款日期" align="center" prop="payTime" />
      <el-table-column label="状态" align="center" width="120">
        <template slot-scope="{ row }">
          {{ renderStatus(row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" plain @click="examine(row, 0)">
            通过
          </el-button>
          <el-button size="mini" type="danger" plain @click="examine(row, 1)">
            驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px" />
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />
  </div>
</template>

<script>
import {
  todoReimbursement,
  approveReimbursement,
} from "@/api2/projectManagement/process";

export default {
  inject: ["projectId"],
  data() {
    return {
      tableData: [],
      listLoading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    renderStatus(status) {
      const obj = {
        0: "已通过",
        1: "已驳回",
        2: "已撤销",
      };
      return obj[status] || "待审核";
    },
    getList() {
      this.listLoading = true;
      todoReimbursement({
        projectId: this.projectId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((data) => {
        this.listLoading = false;
        this.tableData = data.data;
        this.total = data.total;
      });
    },
    onPageSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    onCurrentPageChange(val) {
      this.pageNum = val;
      this.getList();
    },
    async examine(row, type) {
      await approveReimbursement({ ...row, status: type });
      this.$message.success("申请已" + (type ? "驳回" : "通过"));
      this.getList();
    },
  },
};
</script>
